<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!--360浏览器优先以webkit内核解析-->
	<title>运营管理</title>
	<meta name="keywords" content="运营后台管理">
	<meta name="description" content="运营后台管理">
	<link rel="shortcut icon" href="static/favicon.ico">
	<link href="static/css/bootstrap.min.css" rel="stylesheet" />
	<link href="static/css/font-awesome.min.css" rel="stylesheet" />
	<link href="static/css/main/animate.min.css" rel="stylesheet" />
	<link href="static/css/main/style.min862f.css" rel="stylesheet" />
	<!--    <link href="static/ajax/libs/jquery-layout/jquery.layout-latest.css}"  rel="stylesheet"/>-->
	<!--    <link href="static/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}"  rel="stylesheet"/>-->
	<link href="static/css/main/main.css" rel="stylesheet" />
	<style type="text/css">
		.float {
			float: left;
		}

		ul,
		.order {
			list-style: none;
			overflow: hidden;
			width: 100%;
			padding-left: 0px;
		}

		ul li {
			float: left;
			overflow: hidden;
			width: 25%;
		}

		.title {
			font-family: "PingFang HK Regular", "PingFang HK";
			font-weight: 400;
			font-style: normal;
			font-size: 12px;
			color: #989898;
		}

		.je {
			font-family: "Helvetica Neue Regular", "Helvetica Neue";
			font-weight: 500;
			font-style: normal;
			font-size: 28px;
			color: #666666;
		}

		.t1 {
			border: 1px solid rgba(235, 235, 235, 1);
			overflow: hidden;
			padding: 15px 10px;
			margin: 15px 5px;
		}

		.price {
			font-family: "PingFang SC 中等", "PingFang SC";
			font-weight: 400;
			font-style: normal;
			font-size: 24px;
			color: #1e1e1e;
		}

		.jy-history {
			font-family: "PingFang SC 粗体", "PingFang SC";
			font-weight: 650;
			font-style: normal;
			font-size: 16px;
			color: #666666;
			line-height: 21px;
		}
	</style>
</head>

<body class="gray-bg">
<div style="margin: 10px 35px;background-color: #fff;">

	<div  style="padding: 5px 15px;">
		<div class="code" style="margin: 5px;display: none; border: 1px solid rgba(235, 235, 235, 1);overflow: hidden;margin-left: 5px;">
			<div style="line-height: 40px;height: 40px;background-color: rgba(235, 235, 235, 1);padding-left: 10px;">请输入验证码</div>
			<div class="col-md-4" style="margin: 10px;padding-left: 0px;">
				<div class="input-group">
					<input name="code" id="code" type="text" class="form-control" placeholder="输入预定验证码、约战中奖码及红包">
					<span class="input-group-btn">
			            	<button class="btn btn-primary" id="search_code_btn">查询验证</button>
			            </span>
				</div>
				<!-- /input-group -->
			</div>
		</div>
		<ul>
			<li>
				<div class="t1">
					<div align="center" class="float" style="background-color: rgba(73, 169, 238, 1);width: 56px;height: 56px;line-height: 56px;border-radius: 30px;">
						<img src="static/img/main/t1.png" />
					</div>
					<div class="float" style="    margin-left: 15px;">
						<div class="title">历史车辆缴费金额</div>
						<div id="countorder" name="countorder" class="je">234324</div>
						<div>
							<img src="static/img/main/top.png">
							<span style="color: rgba(0, 169, 80, 1);">4% </span>同比上周
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="t1">
					<div align="center" class="float" style="background-color: rgba(152, 216, 125, 1);width: 56px;height: 56px;line-height: 56px;border-radius: 30px;">
						<img src="static/img/main/t2.png" />
					</div>
					<div class="float" style="margin-left: 15px;">
						<div class="title">本周车辆缴费金额</div>
						<div id="countpaysum" name="countpaysum" class="je">13733</div>
						<div>
							<img src="static/img/main/bottom.png">
							<span style="color: rgba(240, 65, 51, 1);">10% </span>同比上周
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="t1">
					<div align="center" class="float" style="background-color: rgba(255, 216, 110, 1);width: 56px;height: 56px;line-height: 56px;border-radius: 30px;">
						<img src="static/img/main/t3.png" />
					</div>
					<div class="float" style="    margin-left: 15px;">
						<div class="title">本周发布公告</div>
						<div id="countpayordersum" name="countpayordersum" class="je">133</div>
						<div>
							<img src="static/img/main/top.png">
							<span style="color: rgba(0, 169, 80, 1);">4% </span>同比上周
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="t1">
					<div align="center" class="float" style="background-color: rgba(243, 133, 124, 1);width: 56px;height: 56px;line-height: 56px;border-radius: 30px;">
						<img src="static/img/main/t4.png" />
					</div>
					<div class="float" style="    margin-left: 15px;">
						<div class="title">本周投诉量</div>
						<div id="countusedordersum" name="countusedordersum" class="je">132</div>
						<div>
							<img src="static/img/main/bottom.png">
							<span style="color: rgba(240, 65, 51, 1);">10% </span>同比上周
						</div>
					</div>
				</div>
			</li>
		</ul>
		<div class="order" style="padding-left: 5px;">
			<div class="float" style="width: 49.5%;overflow: hidden;">
				<!-- <div id="bzImg" style="width:600;height:400px;border: 1px solid #ccc;"></div>
                <div id="zxImg" style="width:600;height:400px;    border: 1px solid #ccc;margin-top: 20px;"></div> -->
				<div id="jiaofeichart"  style="width: 550px;height:400px;"></div>
				<div id="jiluchart"  style="width: 550px;height:400px;"></div>
			</div>
			<div class="float" style="width: 49.5%;padding: 20px 20px 20px 20px;margin-left: 10px;border: 1px solid rgba(235, 235, 235, 1);">



				<div id="showcoupons">
					<div class="jy-history">历史记录</div>
					<div style="width: 100%;overflow: hidden;">
						<div class="float" style="overflow: hidden;">
							<div style="margin-top: 10px">
								2018/11/10
							</div>
							<div style="border-bottom: 1px solid #ccc;line-height: 40px;">
								<img style="width: 16px;" src="static/img/main/text.png" /> 会议室预定
							</div>
							<div style="line-height: 40px;color: #ccc;padding-left: 20px;">
								剩余124个会议室未预定，已预订137
							</div>
						</div>

					</div>
					<div style="width: 100%;overflow: hidden;">
						<div class="float" style="overflow: hidden;">
							<div style="margin-top: 10px">
								2018/11/11
							</div>
							<div style="border-bottom: 1px solid #ccc;line-height: 40px;">
								<img style="width: 16px;" src="static/img/main/text.png" /> 投诉处理
							</div>
							<div style="line-height: 40px;color: #ccc;padding-left: 20px;">
								已处理投诉101个，未处理投诉43个
							</div>
						</div>

					</div>
					<div style="width: 100%;overflow: hidden;">
						<div class="float" style="overflow: hidden;">
							<div style="margin-top: 10px">
								2018/11/10
							</div>
							<div style="border-bottom: 1px solid #ccc;line-height: 40px;">
								<img style="width: 16px;" src="static/img/main/text.png" /> 会议室预定
							</div>
							<div style="line-height: 40px;color: #ccc;padding-left: 20px;">
								剩余124个会议室未预定，已预订137
							</div>
						</div>

					</div>
					<div style="width: 100%;overflow: hidden;">
						<div class="float" style="overflow: hidden;">
							<div style="margin-top: 10px">
								2018/11/10
							</div>
							<div style="border-bottom: 1px solid #ccc;line-height: 40px;">
								<img style="width: 16px;" src="static/img/main/text.png" /> 会议室预定
							</div>
							<div style="line-height: 40px;color: #ccc;padding-left: 20px;">
								剩余124个会议室未预定，已预订137
							</div>
						</div>

					</div>





				</div>
				<div id="huiyishichart"  style="width: 500px;height:400px;"></div>
			</div>
		</div>

	</div>
</div>
</body>
<script src="static/js/main/echarts.common.min.js"></script>
<script src="static/js/jquery.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<!-- 验证插件 -->
<script type="text/javascript" src="static/js/lib/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="static/js/app/app.js"></script>
<script type="text/javascript" src="static/js/cookies.js"></script>
<script type="text/javascript" src="static/js/lib/MD5.js"></script>
<script type="text/javascript" src="static/js/app/net.js"></script>
<script type="text/javascript">
    var shop = 0;
    jQuery(document).ready(function() {
        /* echarts */
        var myChart = echarts.init(document.getElementById('jiaofeichart'));

        // 指定图表的配置项和数据
        var option = {
            title : {
                text: '授权车辆类型',

                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['救护车','市领导','院领导','高管','消防车']
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:134, name:'救护车'},
                        {value:40, name:'市领导'},
                        {value:50, name:'院领导'},
                        {value:88, name:'高管'},
                        {value:133, name:'消防车'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        /*end echarts  */

        var jiluChart = echarts.init(document.getElementById('jiluchart'));
        var option = {
            title : {
                text: '本周来访车辆统计'

            },
            xAxis: {
                type: 'category',
                data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'line',
                symbol: 'triangle',
                symbolSize: 20,
                lineStyle: {
                    normal: {
                        color: 'green',
                        width: 4,
                        type: 'dashed'
                    }
                },
                itemStyle: {
                    normal: {
                        borderWidth: 3,
                        borderColor: 'yellow',
                        color: 'blue'
                    }
                }
            }]
        };
        jiluChart.setOption(option);



        var huiyishichart = echarts.init(document.getElementById('huiyishichart'));
        var option = {
            title : {
                text: '会议室状态',

                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['已预订','未预定','待审核','维修中']
            },
            series : [
                {
                    name: '状态',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:90, name:'已预订'},
                        {value:39, name:'未预定'},
                        {value:40, name:'待审核'},
                        {value:16, name:'维修中'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]

        };
        huiyishichart.setOption(option);





        /* --------------------- */

        shop = Cookies.get("shopid");
        if(shop.length!= ''){
            $('.code').show();
        }
        loadOrderInfoBycate();

        $('#search_code_btn').click(function(e) {
            //查询参数准备
            var code = $("#code").val();
            var shopid = shop;

            var info = {
                verifyCode: code,
                shop: parseInt(shopid)
            };
            //接口调用
            doPost("order/checkOrderCode", info, function(data) {
                //加载数据列表
                if(data.success) {
                    var data = data.data;
                    if(data.orderType == 2) {
                        alert('兑换券验证成功')
                    }
                    alert('验证成功');
                } else {
                    alert(data.desc);
                }
            });
        });




    });
    var loadOrderInfoBycate = function() {

        var Info = {};
        if(!!shop && parseInt(shop) != 0) {
            eval('Info.shopid=' + parseInt(shop));
        }
        //Info.checkcode = str_hmac_md5(settings.checkcodekey,JSON.stringify(Info.data));
        //	Info.checkcode = hex_md5(JSON.stringify(Info.data));
        //	syslog(JSON.stringify(Info));

        doPost("order/myChart", Info, function(data) {
            if(data.success == true) {
                syslog('data----' + JSON.stringify(data));
                $('#countorder').html(data.data.countorder);
                $('#countpaysum').html(data.data.countpaysum);
                $('#countusedordersum').html(data.data.countusedordersum);
                $('#countpayordersum').html(data.data.countpayordersum);
                goThePage(data.data.Couponsitem);
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('zxImg'));
                option = {
                    title: {
                        text: '订单费用',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周天']
                    },
                    series: [{
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: data.data.orderpaysum,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                var myChart1 = echarts.init(document.getElementById('bzImg'));
                option1 = {
                    title: {
                        text: '订单数量',
                        x: 'center'
                    },
                    xAxis: {
                        type: 'category',
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周天']
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.1],
                        minInterval: 1
                    },
                    series: [{
                        data: data.data.orderNum,
                        type: 'line'
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart1.setOption(option1);
            }

        });

    }

    function goThePage(content) {

        $('#showcoupons').html("");
        var str = '<div class="jy-history">交易历史</div>';

        for(var i = 0; i < content.length; i++) {
            //console.log(r[i]);
            str += '<div style="width: 100%;overflow: hidden;">' +
                '<div class="float" style="overflow: hidden;">' +
                '<div style="border-bottom: 1px solid #ccc;line-height: 40px;">' +
                '<img style="width: 16px;" src="static/img/main/text.png" />' +
                content[i].couponnames +
                '</div>' +
                '<div style="line-height: 40px;color: #ccc;padding-left: 20px;">' +
                '消费时间：	' + content[i].orderTime + "        " + '单号：' + content[i].ordernumber +
                '</div>' +
                '</div>' +
                '<div class="price" style="line-height: 80px;float: right;padding-left: 106px;">' +
                '+' + content[i].price +
                '</div>' +
                '</div>';
        }
        $('#showcoupons').html(str);
    }
</script>
<!--<script type="text/javascript">
 // 基于准备好的dom，初始化echarts实例

</script>-->

</html>